import { useState } from 'react'
import { Slider, ColorPicker } from 'antd'
import { FontSizeOutlined } from '@ant-design/icons'

function Text({ onTextSelect, selectedText, drawMode }) {
  const [textIsFocus, setTextIsFocus] = useState(false)
  const [fontSize, setFontSize] = useState(16)
  const [textColor, setTextColor] = useState('#000000')

  const handleTextClick = () => {
    setTextIsFocus(true)
    onTextSelect && onTextSelect({
      title: '文本框',
      type: 'text',
      fontSize,
      textColor
    })
  }
    
  const handleFontSizeChange = (value) => {
    setFontSize(value)
    if (selectedText) {
      onTextSelect && onTextSelect({
        ...selectedText,
        fontSize: value,
        textColor
      })
    }
  }

  const handleTextColorChange = (color) => {
    const colorValue = color.toHexString()
    setTextColor(colorValue)
    if (selectedText) {
      onTextSelect && onTextSelect({
        ...selectedText,
        fontSize,
        textColor: colorValue
      })
    }
  }

  return (
    <div className='text-container'>
      <div className="text-header">
        <span>文本框</span>
      </div>
      
      <div className="text-content">
        <div
          className={`text-item ${textIsFocus && 'active'}`}
          onClick={() => handleTextClick()}
        >
          <div className="text-icon">
            <i className="iconfont" dangerouslySetInnerHTML={{__html: '&#xe65c;'}} />
          </div>
          <span>文本框</span>
        </div>
      </div>

      {(selectedText || drawMode === 'text') && (
        <div className="text-settings">
          <div className="setting-item">
            <div className="setting-label">
              <FontSizeOutlined />
              <span>字体大小</span>
            </div>
            <Slider
              min={8}
              max={72}
              value={fontSize}
              onChange={handleFontSizeChange}
              style={{ width: '100%' }}
            />
            <span className="font-size-value">{fontSize}px</span>
          </div>

          <div className="setting-item">
            <div className="setting-label">
              <span>文字颜色</span>
            </div>
            <ColorPicker
              value={textColor}
              onChange={handleTextColorChange}
              showText
            />
          </div>
        </div>
      )}
    </div>
  )
}

export default Text 